﻿<!DOCTYPE html>
<html>
<head> 
	<title>Pointers with Processing.js</title> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
	<script type="text/javascript" src="js/processing.js"></script> 
</head>
<body>
<canvas id="display"></canvas> 

<script  data-processing-target="display" type="application/processing"> 
ArrayList pointers = new ArrayList();
int width, height;

void setup() {
    width = jQuery(document).width() - 30;
    height = jQuery(document).height() - 30;
    size(width, height);
    smooth();
    background(0);
    fill(color(255, 255, 255));
}

 void draw() {
    fill(color(0, 0, 0, 20));
    noStroke();
    rect(0, 0, width, height);
    for(int i = 0; i < pointers.size(); i++){
      Pointer p = (Pointer)pointers.get(i);
      stroke(p.pColor);
      strokeWeight(p.size);
	  switch ( p.description) {
		  case "mouse":
		  case "pen":
			line(p.oldX, p.oldY, p.x, p.y);
			p.oldX = p.x;
			p.oldY = p.y;
			break;
		  case "touch":
			for (int currentLine = 0; currentLine < 4; currentLine++) {
			  PointLine pLine = p.lines[currentLine];
			  line(pLine.x1, pLine.y1, pLine.x2, pLine.y2);
			}
			updateLines(p);
			break;
      }
    }
}

void pointerDown(PointerEvent e){
    Pointer p = new Pointer();
    p.x = e.offsetX;
    p.y = e.offsetY;
    p.oldX = e.offsetX;
    p.oldY = e.offsetY;
    p.id = e.pointerId;
    switch (e.pointerType) {
        case MOUSE_POINTER:
            p.pColor = color(255, 255, 255);
            p.size = 4.0;
            p.description = "mouse";
            break;
        case PEN_POINTER:
            p.pColor = color(0, 255, 0);
            p.size = 1.0;
            p.description = "pen";
            break;
        case TOUCH_POINTER:
            float r = map(e.offsetX, 0, width, 0, 255);
            float g = map(e.offsetY, 0, height, 0, 255);
            p.pColor = color(r, g, 255-r);
            p.size = 2.0;
            p.description = "touch";
            addLines(p);
            break;
    }
    pointers.add(p);
}

void addLines(Pointer _pointer) {
    _pointer.lines[0] = new PointLine(_pointer.x, _pointer.y, 0, height*.5);
    _pointer.lines[1] = new PointLine(_pointer.x, _pointer.y, width, height * .5);
    _pointer.lines[2] = new PointLine(_pointer.x, _pointer.y, width * .5, 0);
    _pointer.lines[3] = new PointLine(_pointer.x, _pointer.y, width * .5, height);
}

void updateLines(Pointer _pointer) {
    for (int i = 0; i < 4; i++) {
        _pointer.lines[i].x1 = _pointer.x;
        _pointer.lines[i].y1 = _pointer.y;
    }
}

void pointerMove(PointerEvent e) {
  Pointer heldPointer;
  boolean hasPointer = false;
  int holderPos = -1;
  for(int i = pointers.size()-1; i >=0; i--){
	Pointer p = (Pointer)pointers.get(i); 
	if(p.id == e.pointerId){
      heldPointer = p;
      pointers.remove(i);
	  holderPos = i;
	  hasPointer = true;
    }
  }
	if(hasPointer && holderPos != -1)
	{
		heldPointer.x = e.offsetX;
		heldPointer.y = e.offsetY;
		pointers.add(heldPointer);
	}
}

void pointerUp(PointerEvent e) {   
    removePointer(e.pointerId);
} 

void pointerCancel(PointerEvent e) { 
    removePointer(e.pointerId);
}

void pointerOut(PointerEvent e) {  
    removePointer(e.pointerId);
}

void removePointer(float pID)
{
  for(int i = pointers.size()-1; i >=0; i--){
    Pointer holderPointer = (Pointer)pointers.get(i);
    if(holderPointer.id == pID){
      pointers.remove(i);
    }
  }
}

class Pointer {
    float x = 0.0;
    float y = 0.0;
    float oldX = 0.0;
    float oldY = 0.0;
    color pColor = color(255, 255, 255);
    float size = 1.0;
    float id = 0;
    String description = "";
    PointLine[] lines = new PointLine[4];
}

class PointLine {
  float x1 = 0;
  float y1 = 0;
  float x2 = 0;
  float y2 = 0;
  
  PointLine(float _x1, float _y1, float _x2, float _y2)
  {
    x1=_x1;
    x2=_x2;
    y1=_y1;
    y2=_y2;
  } 
}
	</script> 
    </body>
</html>